<template>
    <div id="departmentHistoryGraphic" > </div>
</template>

<script>
    /**
     * 折线图展现模板
     */
    import { getToday,getOneMonthAge,getOneYearAgo,dateFormatString,dateFormatFullString } from "@/util/util";
    
    export default{
        props:{
            searcherId:Number,      //查询对象的ID
            /* 
              查询对象的类型:全国、省级、园区、企业、传感器
                             country,province,industry,company,sensor
            */
            searcherType:String,    
            graphicTitle:String,    //图表标题
            graphicWidth:Number,    //图表宽度
            graphicHeight:Number,   //图表高度
        },
        data(){
            return {
                //historyData:[["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]],
                dateList:[],
                valueList:[],
                startTime:String,       //查询起始时间
                endTime:String,         //查询结束时间 
                graphicChart:{},
            }
        },
        mounted(){
            this.parametertInit();
            this.drawMap();
        },
        methods: {
            parametertInit(){
                /*
                初始化传入的变量
                */
                // if(typeof(this.startTime)== "undefined")
                //     this.startTime = dateFormatString(getOneYearAgo());
                // if(typeof(this.endTime)== "undefined")
                //     this.endTime = dateFormatString(getToday());
                // if(typeof(this.searcherType)== "undefined")
                //     this.searcherType = 'country';
                document.getElementById("departmentHistoryGraphic").style.width = this.graphicWidth + "px";
                document.getElementById("departmentHistoryGraphic").style.height = this.graphicHeight + "px";
            },

            drawMap(){
                this.graphicChart = this.$echarts.init(document.getElementById('departmentHistoryGraphic'));

                // this.dateList = this.historyData.map((item)=> {
                //     return item[0];
                // });

                // this.valueList = this.historyData.map((item)=> {
                //     return item[1];
                // });
                /**
                 * 到后台获取数据，前期模拟数据
                 */
                this.startTime = getToday();
                this.endTime = new Date();
                this.getMockDataOfDay();

                this.graphicChart.resize();

                this.graphicChart.setOption({
                    visualMap: [{
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 0,
                        max: 400
                    }],
                    title: [{
                        left: 'left',
                        text: this.graphicTitle,
                    }],
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            // dataZoom: {
                            //     yAxisIndex: 'none'
                            // },
                            // dataView: {readOnly: false},
                            //magicType: {type: ['line', 'bar']},
                            // restore: {},
                            // saveAsImage: {},
                            myTool1:{
                                show:true,
                                title:'日',
                                icon: 'path://M839.2 85H185.3c-37.7 0-71.3 26.9-71.3 61.5v730.3c0 34.6 33.5 61.5 71.3 61.5h653.9c37.7 0 71.3-26.9 71.3-61.5V146.5c-0.1-34.6-33.6-61.5-71.3-61.5zM635.8 688.9h-28.3v-29.5H423.9v29.9H396V350.5h239.8v338.4z M423.9 377.7h183.5v110.6H423.9zM423.9 515.4h183.5v116.8H423.9z',
                                onclick : () =>{
                                    this.getDayData();
                                }
                            },
                            myTool2:{
                                show:true,
                                title:'月',
                                icon: 'path://M839.2 85H185.3c-37.7 0-71.3 26.9-71.3 61.5v730.3c0 34.6 33.5 61.5 71.3 61.5h653.9c37.7 0 71.3-26.9 71.3-61.5V146.5c-0.1-34.6-33.6-61.5-71.3-61.5zM633.4 653.9c0 22.1-11.3 33.4-33 33.4h-50.1l-7.8-27.5c17.8 0.8 34.1 1.6 48.9 1.6 8.9 0 13.6-5.8 13.6-17.1V567H437.9c-4.7 50.4-19.4 92-44.6 124.9L372 672.5c25.6-34.9 38.4-79.2 39.2-132.7V350.5h222.3v303.4z M439.4 377.3h165.7v67.9H439.4zM439.4 471.2h165.7V541H439.4z',
                                onclick : () =>{
                                    
                                }
                            },
                            myTool3:{
                                show:true,
                                title:'年',
                                icon: 'path://M910.4 803.8v73c0 34.6-33.5 61.5-71.3 61.5H185.3c-37.7 0-71.3-26.9-71.3-61.5V146.5c0-34.6 33.5-61.5 71.3-61.5h653.9c37.7 0 71.3 26.9 71.3 61.5v657.3z M548.5 578.3v-83.8h108.3v-26.8H548.5v-62.1h121.8v-27.2H429.4c5.4-13.2 10.5-26.8 14.7-41.5l-29.1-5.4c-13.6 50.4-40 90.4-79.2 119.9l18.6 23.3c24.8-18.6 45-41.5 61.3-69.1h104.4v62.1H404.9v110.6h-64v27.2h179.3V692h28.3v-86.5h134.2v-27.2H548.5z',
                                onclick : ()=>{
                                    this.getYearData();
                                }
                            },
                        }
                    },
                    xAxis: [{
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                        },
                        data: this.dateList
                    },
                    ],
                    yAxis: [{
                        splitLine: {show: false}
                    }],
                    // grid: [{
                    //     bottom: '100%'
                    // }],
                    series: [{
                        type: 'line',
                        showSymbol: false,
                        data: this.valueList
                    }]
                })
            },

            /**
             * 查询当天的数据
             */
            getDayData(){
                this.startTime = getToday();
                this.endTime = new Date();
                
                /**
                 * 从后台获取数据，前期模拟数据
                 */
                this.getMockDataOfDay();
                this.graphicChart.setOption({
                    xAxis: [{
                        data: this.dateList
                    }],
                    series: [{
                        data: this.valueList
                    }]
                });
            },

            /**
             * 查询最近一月的数据
             */
            getMonthData(){

            },

            /**
             * 查询最近一年的数据
             */
            getYearData(){
                this.startTime = dateFormatString(getOneYearAgo());
                this.endTime = dateFormatString(getToday());

                /**
                 * 从后台获取数据，前期模拟数据
                 */
                this.dateList = ['2018-01-31','2018-02-28','2018-03-31','2018-04-30','2018-05-31','2018-06-30','2018-07-31','2018-08-31','2018-09-30','2018-10-31','2018-11-30','201-12-31'];
                this.valueList = [1000,800,1200,1500,1900,1000,1100,600,900,1900,1100,1300];
                this.graphicChart.setOption({
                    xAxis: [{
                        data: this.dateList
                    }],
                    series: [{
                        data: this.valueList
                    }]
                });
            },


            /**
             * 获取当日模拟数据，模拟函数，后期去除！！！
             */
            getMockDataOfDay(){
                this.valueList = [];
                this.dateList = [];
                var split = (this.endTime - this.startTime)/( 5 * 60 * 1000);
                var tempTime = this.startTime;
                for(var i=1;i<split;i++){
                    this.valueList.push(parseInt(1000 + Math.random() * 210 - 100));

                    this.dateList.push(dateFormatFullString(tempTime));

                    tempTime = new Date(tempTime.getTime() +  5 * 60 * 1000);
                }
            },

            /**
             * 到后台查询数据
             */
            queryData(){

            }
        }
    }
</script>